<template>
  <div class="wrap">
    <input type="search" v-model="search" class="search-input" placeholder="名将与征服" @keyup.enter="toSearch(search)"/>
    <button @click="toSearch(search)"><img src="../../static/img/sousuo.png" alt="" class="search-icon"></button>
  </div>
</template>

<script>
export default {
  name: 'serachBox',
  data () {
    return {
      search: ''
    }
  },
  methods: {
    toSearch () {
      if (this.search.length === 0) {
        // this.$message.error('请输入您要搜索的关键词')
      } else {
        this.$router.push({path: '/search', query: { text: this.search }})
      }
    }
  },
  mounted: function () {
  }
}
</script>
<style scoped>
  .wrap{
    padding:0.2667rem;
    background-color: #fff;
    display: flex;
    flex-direction: row;
  }
  .wrap .search-input{
    flex: 1;
    height: 40px; /*no*/
    padding-left: 0.2666666667rem;
    color: #c1c1c1;
    font-size: 28px; /*px*/
    box-sizing: border-box;
    outline: none;
    border:1px solid #ddd;
  }
  .wrap button{
    flex: 0 0 40px; /*no*/
    height: 40px; /*no*/
    color: white;
    border: 1px solid #ddd; /*no*/
    box-sizing: border-box;
    /*background-color: rgba(0, 150, 136, 1);*/
    text-align: center;
    background:#fff;
  }
  .wrap button .search-icon{
    width:50px;
  }
</style>
